<template>
  <div>
    <div class="osp-con">
      <div class="osp-title">请认真核对客户签约信息！</div>
      <div class="osp-btn" @click="signing">客户线上签约</div>
    </div>
    <!--    签约弹层-->
    <el-dialog title="在线签约："
               :before-close="closeLayer"
               :visible.sync="dialogVisible">
      <div class="qy-con">
        <!--        发起签约-->
        <div class="qy-item qy-faqi">
          <div class="qy-item-content">
            <div class="qy-faqi-title">第一步：信息核对</div>
            <div class="qy-faqi-bg">
              <div class="qy-faqi-con-t">客户在线签约中心</div>
              <div class="qy-faqi-con-c">
                <img src="../../../src/assets/img/qy-man-icon.png" class="qy-man-icon">
                <div class="qy-faqi-con-c-t">尊敬的{{ htInfo.signName }}您好：</div>
                <p class="qy-faqi-con-cc">您当前正在进行{{htInfo.productName}}线上签约，请根据签约提醒完成以下信息的确认及签约流程。</p>
              </div>
            </div>
            <div class="qy-faqi-item">
              <div class="qy-faqi-t">签约信息</div>
              <div class="qy-faqi-item-con">
                <div class="qy-faqi-item-con-tex">申请人姓名：{{ htInfo.signName }}</div>
                <div class="qy-faqi-item-con-tex">身份证号码：{{ htInfo.idCard }}</div>
                <div class="qy-faqi-item-con-tex">联系电话：{{ htInfo.phone }}</div>
                <div class="qy-faqi-item-con-tex">抵押物地址：{{ htInfo.address }}</div>
                <div class="qy-faqi-item-con-tex">审批额度：{{ htInfo.guaranteeAmount }}万元</div>
              </div>
            </div>
            <div class="qy-faqi-item">
              <div class="qy-faqi-t">签约合同</div>
              <div class="ht-list-c">
                <div :class="['ht-list',{'ht-list-a':item.contractId==contractId}]" @click="changHt(item.contractId)"
                     v-for="(item,index) in htInfo.contractList" :key="index">{{ item.contractName }}
                </div>
              </div>
            </div>
          </div>
          <div :class="['faqi-btn',{'faqi-btn-a':htInfo.allowed}]" @click="bySigning">{{ htInfo.allowed ? "已发起签约" : "发起签约" }}</div>
        </div>
        <div class="qy-line" v-if="showProcess"></div>
        <!--        签约流程-->
        <div class="qy-item qy-liuc" v-if="showProcess">
          <div class="qy-faqi-title">第二步：远程监测签约</div>
          <div class="qy-item-content qy-item-content1">
            <div class="qy-faqi-con">
              <el-timeline>
                <el-timeline-item :class="{ active: true }" v-for="(item,index) in signStepList" :key="index">
                  <el-card class="card-content" shadow="never">
                    <p class="timer-text">{{ item.updateTime }}</p>
                    <p class="jd-state">{{ item.stepName }}:{{ item.statusName }}</p>
                    <!--                    签约步骤：1身份证认证 2手机号认证 3签约信息核对 4手写签名 5承诺视频 6活体及真人识别 7:签约完成-->
                    <div class="yulan-btn" @click="preview(item.id,item.step)" v-if="item.step==1 || item.step==4 ||  item.step==5">预览</div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          <el-input type="textarea" :rows="3" v-model="reason"  placeholder="填写驳回原因:" class="bohui-box"></el-input>
          <div class="qianyue-box" v-if="!monitInfo.agreeState">
            <div class="qianyue-btn" @click="agreeSign">同意签约</div>
            <div class="qianyue-btn bohui-btn" @click="rejected">驳回重签</div>
          </div>
        </div>
      </div>

    </el-dialog>
    <el-dialog
      title="查看附件"
      :visible.sync="show"
      :before-close="handleClose"
      append-to-body
      width="50%"
      top="30px"
      style="text-align: center"
    >
      <video class="video-c" controls v-if="type==5" :src="resUrl"></video>
      <img  class="video-c" v-else  :src="resUrl">

    </el-dialog>
  </div>
</template>

<script>
import {
  checkInformation,
  initiation,
  signAppManagerMonitor,
  signAppManagerAgree,
  signAppManagerRejection,
  signAppManagerpreview
} from "../../../src/assets/js/api.js";

export default {
  name: "onlineSignUp",
  data() {
    return {
      dialogVisible: false, //弹层
      showProcess: false, //步骤第二页
      reason: "",
      htInfo: {},//合同信息
      contractId: "",//选中的合同id
      monitInfo: {},//监控信息
      signStepList: [],//步骤list
      show:false,
      type:0,
      resUrl:'',
    };
  },
  props: {
    orderNumber: String
  },
  mounted() {

  },
  timer:null,
  methods: {

    //预览
    preview(id,type){
      signAppManagerpreview(id).then(res=>{
        this.show=true;
        this.type=type;
        this.resUrl=res.data;
      })
    },
    //驳回
    rejected(){
      signAppManagerRejection({
        "contractId": this.contractId,
        "reason": this.reason
      }).then(()=>{
        this.showProcess=false;
        this.dialogVisible=false;
        this.contractId='';
        this.$message.success("提交成功");
      })
    },
    //同意签约
    agreeSign(){
      signAppManagerAgree(this.contractId).then(()=>{
        this.monitInfo.agreeState=1;
      })
    },

    //切换合同
    changHt(id) {
      if (this.htInfo.allowed) {
        this.signStepList=[];
        this.contractId = id;
        this.remoteMonitoring();
      } else {
        this.$message.error("请发起签约后才能查看");
      }

    },

    //远程监控
    remoteMonitoring() {
      this.monData();
    },

    //监控
    monData(){
      clearTimeout(this.timer);
      signAppManagerMonitor({ contractId: this.contractId, orderNumber: this.orderNumber }).then(res => {
        if (res.data.signStepList) {
          this.showProcess = true;
          this.monitInfo = res.data;
          this.reason=res.data.reason;
          this.signStepList = res.data.signStepList;
          this.timer=setTimeout(()=>{
            this.monData();
          },8000)

        } else {
          this.contractId = '';
          this.showProcess = false;
          this.signStepList=[];
          this.$message.error("用户还未进行操作");
        }
      });
    },

    //发起签约
    bySigning() {
      if (!this.htInfo.allowed){
        //发起签约
        initiation(this.htInfo).then(() => {
          this.contractId = this.htInfo.contractList[0].contractId;
          this.remoteMonitoring();
          this.htInfo.allowed = 1;
        });

      }
    },
    //准备签约
    signing() {
      this.getInfo();
    },
    //信息核对
    getInfo() {
      checkInformation(this.orderNumber).then(res => {
        this.dialogVisible = true;
        this.htInfo = res.data;
      });
    },
    //关闭弹层
    closeLayer(done){
      let that=this;
      this.$confirm("确认关闭？")
        .then(() => {
          this.contractId='';
          this.showProcess=false;
          clearTimeout(that.timer);
          done();
        })
        .catch(() => {
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {
        });
    }
  }
};
</script>

<style scoped lang="less">
.osp-con {
  padding: 38px 0;
}

.osp-title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 29px;
}

.osp-btn {
  width: 240px;
  height: 40px;
  background: #28B779;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
  text-align: center;
  margin: 0 auto;
}

.qy-con {
  display: flex;
}

.qy-item {
  width: 410px;
  text-align: left;
}

.qy-item-content {
  height: 510px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 50px;
  padding-right: 10px;
}

.qy-item-content1 {
  height: 380px;
}

/* 设置滚动条的样 */

.qy-item-content::-webkit-scrollbar {
  width: 5px;

}

/* 滚动槽 */

.qy-item-content::-webkit-scrollbar-track {

  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);

  border-radius: 10px;

}

/* 滚动条滑块 */

.qy-item-content::-webkit-scrollbar-thumb {

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);

}


.qy-faqi {

}

.qy-line {
  width: 1px;
  height: 640px;
  background-color: #DDDDDD;
  margin: 0 20px;
}

.qy-faqi-title {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}

.qy-faqi-bg {
  width: 100%;
  height: 210px;
  background-image: url("../../../src/assets/img/qy-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 32px 18px;
  box-sizing: border-box;
  margin-bottom: 40px;
}

.qy-faqi-con-t {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 20px;
}

::v-deep .el-dialog__header {
  text-align: left;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}

.qy-faqi-con-c {
  width: 100%;
  height: 140px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 36px 4px rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  position: relative;
  padding: 22px 0 0 23px;
  box-sizing: border-box;
}

.qy-man-icon {
  width: 90px;
  height: 70px;
  position: absolute;
  right: 13px;
  bottom: 0;
}

.qy-faqi-con-c-t {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 16px;
}

.qy-faqi-con-cc {
  width: 260px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
  text-indent: 20px;
}

.qy-faqi-item {
  padding: 0 20px;
}

.qy-faqi-t {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}

.qy-faqi-item-con {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 0px 36px 4px rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  padding: 27px 12px 2px;
  margin-bottom: 18px;
}

.qy-faqi-item-con-tex {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20px;
}

.ht-list-c {
  box-shadow: 0px 0px 36px 4px rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.ht-list {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 50px;
  height: 45px;
  padding: 0 10px;
}

.ht-list-a {
  background-color: #edecec;
}

.faqi-btn {
  width: 230px;
  height: 40px;
  border: 1px solid #333333;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
  text-align: center;
  margin: 50px auto 0;
  cursor: pointer;
  background: #ffffff;
}
.faqi-btn-a{
  background: #d7d6d6;
  border:none;
  color: #FFFFFF;
  cursor: no-drop;

}


::v-deep .el-dialog {
  width: fit-content;
}

.qy-faqi-con {
  background: #F8F8F8;
  padding: 40px 20px 20px 10px;
  display: flex;
}

.jiindu-item {
  display: flex;
  flex-direction: row;

}

::v-deep .el-card {
  border: none;
}

::v-deep .el-card__body {
  padding: 20px 12px;
}

.card-content {
  width: 350px;
}

.timer-text {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

.jd-state {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 16px;
}

.yulan-btn {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #52AAF8;
  line-height: 22px;
  width: 48px;
  height: 22px;
  background: #EDF6FE;
  border: 1px solid #52AAF8;
  border-radius: 4px;
  text-align: center;
  margin-top: 16px;
}

.jd-state-s {
  margin: 0;
}

.active ::v-deep .el-timeline-item__node {
  background-color: #52aaf8;
}

::v-deep .el-timeline-item__tail {
  top: 20px;
}

.active ::v-deep .el-timeline-item__tail {
  border-left: 2px solid #52aaf8;
}

::v-deep .el-timeline-item__node {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 20px;
}

::v-deep .el-timeline-item__node::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}

.bohui-box {
  margin-top: 20px;
  margin-bottom: 40px;
}

.qianyue-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qianyue-btn {
  width: 170px;
  height: 40px;
  background: #3B9DF8;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
  text-align: center;
}

.bohui-btn {
  background-color: transparent;
  border: 1px solid #333333;
  color: #333333;;
}

::v-deep .el-textarea__inner {
  border: 1px solid #CCCCCC;
}

::v-deep .el-textarea__inner::placeholder {
  color: #333333;
}
.video-c{
  width: 100%;
}
</style>